<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>process</title>
  </head>
  <style>
    .playground {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  <body>
    <div class="playground">
      <svg id="mysvg" width="0" height="0" style="transform: rotate(144deg)">
        <defs>
          <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="#85CBFF" />
            <stop offset="100%" stop-color="#1778FD" />
          </linearGradient>
        </defs>

        <circle
          id="circle1"
          stroke="#e9f4ff"
          stroke-linecap="round"
          fill="none"
        />

        <circle
          class="circle"
          id="circle2"
          stroke="url(#grad)"
          stroke-linecap="round"
          fill="none"
        />
      </svg>
    </div>
  </body>
  <script>
    const PAI = 3.14;
    let size = 140,
      bar_width = 10,
      round = 65;

    const r = (size - bar_width * 2) / 2;

    function setProcess(percent) {
      if (percent > 100) {
        percent = 100;
      } else if (percent < 0) {
        percent = 0;
      }
      percent = (percent * round) / 100;
      var svg = document.getElementById("mysvg");
      svg.setAttribute("width", size);
      svg.setAttribute("height", size);

      var c1 = document.getElementById("circle1");
      c1.setAttribute("r", r);
      c1.setAttribute("cy", size / 2);
      c1.setAttribute("cx", size / 2);
      c1.setAttribute("stroke-width", bar_width);
      c1.setAttribute("stroke-dasharray", (size - bar_width) * PAI);
      c1.setAttribute(
        "stroke-dashoffset",
        ((size - bar_width) * PAI * (100 - round)) / 100
      );
      c1.setAttribute("r", r);

      var c2 = document.getElementById("circle2");
      c2.setAttribute("r", r);
      c2.setAttribute("cy", size / 2);
      c2.setAttribute("cx", size / 2);
      c2.setAttribute("stroke-width", bar_width);
      c2.setAttribute("stroke-dasharray", (size - bar_width) * PAI);
      c2.setAttribute(
        "stroke-dashoffset",
        ((size - bar_width) * PAI * (100 - percent)) / 100
      );
      c2.setAttribute("r", r);
    }

    window.onload = () => {
      let p = 0;

      setProcess(p);
      setInterval(() => {
        p += 10;
        if (p > 100) {
          p = 0;
        }
        setProcess(p);
      }, 500);
    };

    // 动画
    // window.onload = () => {
    //   let p = 50;
    //   var style = document.createElement("style");
    //   style.innerHTML = `
    //   @keyframes circle {
    //     from { stroke-dashoffset: ${(size - bar_width) * 3.14}px }
    //     to { stroke-dashoffset: ${
    //       ((size - bar_width) * PAI * (100 - (p * round) / 100)) / 100
    //     }px }
    //   }
    //   .circle {
    //     animation: circle .5s cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards
    //   }
    // `;
    //   document.getElementsByTagName("head")[0].appendChild(style);

    //   setProcess(p);
    // };
  </script>
</html>
